<template>
    <div class="time-select">
        <div  class="select-item"
              v-if="timeTypeList && timeTypeList.length > 0"
              :class="{'select-item-active':item.value === timeTypeModel}"
              v-for="item in timeTypeList"
              :key="item.value"
              @click="slectChange(item.value)">{{item.name}}</div>
    </div>
</template>

<script>
export default {
  created () {
    if (this.valuedefault && this.valuedefault.length > 0) {
      this._.each(this.valuedefault, (item) => {
        let obj = this._.find(this.timeTypeListDefault, { name: item })
        if (obj) {
          this.timeTypeList.push(obj)
        }
      })
    }
  },
  data () {
    return {
      timeTypeModel: 'day',
      timeTypeListDefault: [
        {
          name: '日',
          value: 'day'
        },
        {
          name: '月',
          value: 'month'
        },
        {
          name: '年',
          value: 'year'
        }
      ],
      timeTypeList: []
    }
  },
  props: {
    timeChange: {
      type: Function
    },
    keyNmae: {
      type: String
    },
    value: {
      type: String
    },
    valuedefault: {
      type: Array
    }
  },
  methods: {
    slectChange (timeType) {
      this.timeTypeModel = timeType
      this.timeChange(this.keyNmae, timeType)
    }
  }
}
</script>

<style lang="scss" scoped>
.time-select{
    position: absolute;
    right: 30px;
    z-index: 1;
    top: 20px;
    .select-item{
        display: inline-block;
        cursor: pointer;
        padding: 6px 12px;
        margin-right: 10px;
        border-radius: 5px;
    }
    .select-item-active{
        background-color: #E6E6E6;
    }
}
</style>
